<!-- 顶级菜单选择器 -->
<template>
  <div class="top-menu-select">
    <el-select
      v-model="menuValue"
      :disabled="disabled"
      :clearable="clearable"
      @change="selectChange"
      :placeholder="placeholder"
      style="width: 100%;"
    >
      <el-option v-for="item in selectOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
/**
 * @description 顶级菜单选择器
 * @param value 菜单id
 * @event change // 选择项变化触发事件
 */
import { Component, Vue, Prop, Emit, Watch } from "vue-property-decorator";
import { Action, namespace } from "vuex-class";

const authModule = namespace("auth");
@Component
export default class MenuSelect extends Vue {
  @authModule.Action("getTopMenuList") public getTopMenuList: any;
  @Prop() public value!: number | string;
  @Prop({ default: "请选择菜单" }) public placeholder!: string;
  @Prop({ default: false }) public clearable!: boolean;
  @Prop({ default: false }) public disabled!: boolean;
  public menuValue: number | string = this.value;
  public selectOptions: any[] = [];
  public async fetchData() {
    try {
      const data = await this.getTopMenuList({
        parent_id: 0,
        status: "SHOW"
      });
      this.selectOptions = data;
    } catch (err) {
      console.log(err);
    }
  }
  public created() {
    this.fetchData();
  }

  /**
   * selectChange
   */
  @Emit("input")
  @Emit("change")
  public selectChange(value: number) {
    // console.log(value);
  }
  @Watch("value")
  public watchMenuId(val: number) {
    this.menuValue = val;
  }
}
</script>